<template>
  <div id="caseShow">
    <span class="title">成功案例</span>
    <swiper :options="swiperOption">
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <swiper-slide class="swiper-slide" v-for="(item,index) in items" :key="index">
        <case-show-item v-for="temp in item" :item="temp"/>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import CaseShowItem from "./childCpn/CaseShowItem";
  import Show from "../../components/common/Show";
  import axios from "axios";
  export default {
    name: "CaseShow",
    components:{
      CaseShowItem,
      Show
    },
    mounted() {
      axios.post('https://haotry.top/api/admin/getCaseByKey',JSON.stringify({case_status:1}),{
        headers:{
          'Content-Type':'application/json'
        }
      }).then(res => {
        console.log(res)
        let temp = []
        for (let i=0; i<res.data.length; i++)
        {
          temp.push(res.data[i])
          if(temp.length === 4 || i===res.data.length-1){
            this.items.push(temp)
            temp = []
          }
        }
      })
    },
    data(){
      return{
        items:[],
        swiperOption:{
          //显示分页
          pagination: {
            el: '.swiper-pagination'
          },
          //设置点击箭头
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          // //自动轮播
          // autoplay: {
          //   delay: 3000,
          //   //当用户滑动图片后继续自动轮播
          //   disableOnInteraction: false,
          // },
          //开启循环模式
          loop: true
        },
      }
    },
    methods:{
    }
  }
</script>

<style scoped>
  #caseShow{
    height: 350px;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #2c3e50;
  }
  .swiper-slide{
    display: flex;
    margin-top: 20px;
    justify-content: center;
  }
  .title{
    width: 100px;
    font-size: 20px;
  }
  .swiper-pagination{
    top: 0;
  }
  /deep/.swiper-wrapper{
    padding: 20px 0;
  }

  /deep/.swiper-pagination-bullet{
    width: 40px;
    border-radius: 0;
    height: 4px;
  }
  /deep/.swiper-container-horizontal > .swiper-pagination-bullets{
    height: 20px;
  }
</style>